<template>
  <div class="open-vip" v-if="vipList.length >= 2">
    <div class="vip-tabs flex">
      <div class="vip-btn cursor flex" @click="changeTab(0)" v-if="vipList">
        <div
          :class="
            chooseTab == 0
              ? 'vip-btn-label chooseColor choose-tab'
              : 'vip-btn-label'
          "
        >
          {{vipList[0].title}}
        </div>
        <div
          :class="chooseTab == 0 ? 'vip-btn-tip chooseColor' : 'vip-btn-tip'"
        >
          {{vipList[0].desription}}
        </div>
      </div>
      <div class="vip-btn cursor flex" @click="changeTab(1)">
        <div
          :class="
            chooseTab == 1
              ? 'vip-btn-label chooseColor choose-tab'
              : 'vip-btn-label'
          "
        >
          {{vipList[1].title}}
        </div>
        <div
          :class="chooseTab == 1 ? 'vip-btn-tip chooseColor' : 'vip-btn-tip'"
        >
          {{vipList[1].desription}}
        </div>
      </div>
    </div>
    <div class="vip-box">
      <div class="vip-list flex" :style="'width:'+listWidth+'px'">
        <div
          :class="
            chooseVipMoney == item ? 'choose-vip-item cursor' : 'vip-item cursor'
          "
          @click="chooseItem(item)"
          v-for="(item, index) in vipList[chooseTab].grounp"
          :key="'vip' + index"
        >
          <div class="vip-item-title">{{vipList[chooseTab][item].title}}</div>
          <div class="vip-money-line flex">
            <div>{{vipList[chooseTab][item].price}}</div>
            <div class="vip-item-discount flex">全平台可用</div>
          </div>
          <div class="vip-time-liuliang flex">
            <div class="vip-time">时长：{{vipList[chooseTab][item].addtime}} 天</div>
            <div class="vip-liuliang">流量：{{vipList[chooseTab][item].bandwith}} GB</div>
          </div>
        </div>
      </div>
    </div>
    <div class="vip-item-tip">
      {{ tipTitle }}
    </div>
    <div class="pay-list">
        <div class="pay-item flex cursor" @click="changePay(item)" v-for="(item, index) in payList" :key="'pay'+index">
            <div :class="choosePay == item ?'choose-item':'pay-radio'"></div>
          <img  src="~@/assets/alipay-icon.png" alt="" v-show="item == 1">
          <img  src="~@/assets/wpay-icon.png" alt="" v-show="item == 2">
          <img  src="~@/assets/number-icon.png" alt="" v-show="item == 3">
            <img  src="~@/assets/yue-icon.png" alt="" v-show="item == 4">
            <div v-show="item == 1">支付宝支付</div>
            <div v-show="item == 2">微信支付</div>
            <div v-show="item == 3">数字货币支付</div>
            <div v-show="item == 4" style="width:270px">余额支付（邀请好友，可获得余额返利用于会员支付 <span class="chooseColor" @click="goLnviteRebate()">去邀请</span>） </div>
        </div>
    </div>
    <div class="go-pay flex">
        <div class="chooseColor flex">总计：{{allMoney}}</div>
        <div class="goPay flex cursor" @click="payment()">立即支付</div>
    </div>
    <el-dialog
      title="支付"
      center
      width="720px"
      :visible.sync="goPay"
      :before-close="handleClose"
      append-to-body
    >
    <div id="paymethod"></div>
    </el-dialog>
    <el-dialog
      center
      width="400px"
      :visible.sync="confirmDialog"
      :before-close="confirmSubmit"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      append-to-body
    >
    <div style="color:#fff;margin:50px;justify-content:center" class="flex">请确认是否已支付？</div>
    <span slot="footer" class="dialog-footer">
    <el-button size="small" @click="confirmSubmit(false)">未支付</el-button>
    <el-button size="small" type="primary" @click="confirmSubmit(true)">已支付</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {getShopQRCode, getShopList, getYuePay} from "../../utils/api";
import bus from '../../utils/bus'
export default {
  name: "open-vip",
  data() {
    return {
      goPay:false,
      confirmDialog:false,
      listWidth:0,
      chooseTab: 0,
      chooseVipMoney: '',
      choosePay:1,
      allMoney:0,
      vipList:[],
      payList:[],
      tipTitle: '未选择套餐'
    };
  },
  created(){
  },
  methods: {
    changeTab(type) {
      this.chooseTab = type;
      if(this.chooseVipMoney != '' && this.chooseVipMoney != null){
        this.allMoney = this.vipList[type][this.chooseVipMoney].price
        this.listWidth = this.vipList[this.chooseTab].grounp.length * 220 + (this.vipList[this.chooseTab].grounp.length -1) *10
        this.chooseItem(this.chooseVipMoney)
      }
    },
    chooseItem(item) {
      this.chooseVipMoney = item;
      const data = this.vipList[this.chooseTab][item]
      this.allMoney = data.price
      this.tipTitle = '当前选择套餐为：' +data.title+ '，会员时长'+ data.addtime + '天，流量'+data.bandwith + 'GB，同时在线设备数 '+ data.con_count + ' 台'
      console.log("tipTitle="+JSON.stringify(item))
    },
    changePay(type){
        this.choosePay =type
    },
    handShopList(){
      getShopList().then(res => {
        if(res.data && res.data.ret == 1){
          this.vipList = res.data.data.shop_list
          this.payList = res.data.data.paytype
          this.listWidth = this.vipList[this.chooseTab].grounp.length * 220 + (this.vipList[this.chooseTab].grounp.length -1) *10
        }else{
          this.$message.error("网络异常")
        }
      })
    },
    payment() {
      if (this.chooseVipMoney == '' || this.chooseVipMoney == null) {
        this.$message.error("请先选择商品")
        return;
      }
      const param = {
        shop_id: this.vipList[this.chooseTab].shop_id,
        shop_grounp: this.chooseVipMoney,
        paytype: this.choosePay
      }
      if(this.choosePay == 4){ //余额支付 判断余额够不够
        const yue = this.$localStore.get("userInfo").money
        if (this.allMoney > yue) {
          this.$message.info("余额不足，请选择其他支付方式")
          return;
        }else{
          getYuePay(param).then((res) => {
            if (res.data.ret == 1) {
              this.$message.success(res.data.msg);
              // 更新余额 信息
              // this.$localStore.set("userInfo",res.data.data.user)
              bus.$emit('getUser',true)
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      }else{
        getShopQRCode(param).then(res => {
          if (res.data.ret == 1) {
            this.$store.commit('CHANGE_PAYSTR',res.data.data.pay_url)
            this.$electron.ipcRenderer.send("open-pay");
            setTimeout(()=>{
              this.confirmDialog = true
            },1000)
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    },
    handleClose(){
      document.getElementById('paymethod').removeChild()
      this.goPay = false
    },
    //确认是否支付
    confirmSubmit(isPay){
      this.confirmDialog = false
      if(isPay){
        bus.$emit('getUser',true)
      }
    },
    goLnviteRebate(){
      this.$emit('changeNav',4)
    }
  },
  mounted() {
    this.handShopList()
  }
};
</script>

<style>
.open-vip {
  width: 100%;
  height: 100%;
  padding: 30px 20px;
  padding-bottom: 0;
  position: relative;
}
.vip-tabs {
  width: 100%;
}
.vip-btn {
  width: 50%;
  flex-direction: column;
}
.vip-btn-label {
  font-size: 20px;
  font-weight: bold;
  color: #b7b7b7;
  margin-bottom: 17px;
}
.choose-tab {
  background: url("../../assets/tab-bg.png") left top no-repeat;
  background-size: 100% 100%;
}
.vip-btn-tip {
  font-size: 14px;
  font-weight: 400;
  color: #b7b7b7;
}
.vip-box{
  width:76vw;
  overflow-x: auto;
}
.vip-list {
  justify-content: flex-start !important;
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
}
.vip-item {
  width: 220px;
  height: 136px;
  margin-right: 10px;
  padding: 20px 10px;
  background: url("../../assets/vip-bg.png") left top no-repeat;
  background-size: 100% 100%;
}
.choose-vip-item {
  width: 220px;
  height: 136px;
  margin-right: 10px;
  padding: 20px 10px;
  background: url("../../assets/vip-active-bg.png") left top no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.vip-item-tip {
  margin-top: 25px;
  margin-bottom: 48px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #b7b7b7;
}
.vip-money-line {
  margin: 18px 0;
  justify-content: flex-start !important;
}
.vip-item-discount {
  /*width: 50px;*/
  height: 26px;
  /*border: 1px solid #fb7328;*/
  border-radius: 8px;
  margin-left: 7px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  /*color: #fb7328;*/
  margin-left: 100px;
}
.vip-time-liuliang {
  justify-content: space-between !important;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #b7b7b7;
}
.pay-item{
    justify-content: flex-start !important;
    margin-bottom: 20px;
}
.choose-item{
    width: 20px;
    height: 20px;
    background: url('../../assets/circle-acitve.png') left center no-repeat;
    background-size: 100%;
}
.pay-radio{
    width: 20px;
    height: 20px;
    background: url('../../assets/circle-2.png') left center no-repeat;
    background-size: 100%;
}
.pay-item img{
    width: 22px;
    height: 22px;
    margin: 0 7px 0 17px;
}
.go-pay{
    width: 100%;
    height: 60px;
    justify-content: flex-end !important;
    position: absolute;
    right: 0;
    bottom: 0;
}
.go-pay>div{
    width: 165px;
height: 100%;
background: #24262F;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: bold;
}
.go-pay .goPay{
width: 250px;
height: 100%;
background: #09D0CE;
color: #ffffff;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: bold;
}
</style>